import { Effects, Environment, OrbitControls } from "@react-three/drei";
import { Canvas, extend, useThree } from "@react-three/fiber";
import { SSAARenderPass } from 'three/examples/jsm/postprocessing/SSAARenderPass.js'
import { Bloom, DepthOfField, EffectComposer, Noise, Vignette, SSAO } from '@react-three/postprocessing'
import { useEffect, useRef } from "react";
// import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
import Scene from "./components/Scene";

import "./App.css";




extend({ SSAARenderPass });


// function PostProcessing() {
//   const { gl, scene, camera, size } = useThree();

//   useEffect(() => {
//     const composer = new EffectComposer(gl);
//     const ssaaPass = new SSAARenderPass(scene, camera);

//     // 设置 samples 值，控制超采样质量
//     ssaaPass.sampleLevel = 2;

//     composer.addPass(ssaaPass);

//     const render = () => {
//       composer.render();
//     };

//     gl.setAnimationLoop(render);

//     return () => gl.setAnimationLoop(null);
//   }, [gl, scene, camera]);

//   return null;
// }



function App() {

  const canvasRef = useRef<HTMLCanvasElement>(null)

  useEffect(() => {
    if (canvasRef.current) {
      console.log(canvasRef)
    }
  }, [])



  return (
    <div className="w-screen h-screen">
      <Canvas ref={canvasRef}>
        <Environment files={['./env.hdr']} />
        <OrbitControls />
        <Scene />
        <EffectComposer enableNormalPass>
          <SSAO />
        </EffectComposer>
      </Canvas>
      <div>

      </div>
    </div>
  )
}

export default App
